<#import path="https://player.polyv.net/livesdk/polyv-live.min.js" write="1" befor="1" />
<#import path="https://cdn.bootcss.com/blueimp-md5/2.11.0/js/md5.min.js" write="1" befor="1" />
<#import path="https://player.polyv.net/jssdk/polyv-chatroom.min.js" write="1" befor="1" />
<#import path="https://cdn.bootcss.com/axios/0.19.0/axios.min.js" write="1" befor="1" />
<#import path="https://cdn.bootcss.com/qs/6.7.0/qs.min.js" write="1" befor="1" />
<#import path="https://player.polyv.net/resp/rtc-sdk/latest/polyv-rtc.min.js" write="1" befor="1" />
<#import type="css" path="https://player.polyv.net/jssdk/polyv-chatroom.min.css" befor="1" />
<#extends title="视频" data="{'list':[
{'name':'视频','href':'###','title':''},
{'name':'视频','href':'###','title':''},
{'name':'视频'}
]}" />
<#beginBlock id="crumb" data="{'list':[
{'name':'视频','href':'###','title':''},
{'name':'视频','href':'###','title':''},
{'name':'视频'}
]}">
<#endBlock>

<style>
    html,
    body {
        margin: 0;
        height: 100%;
        background: #111c2d;
    }
    .container {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        height: 678px;
        margin: 0 auto;
        padding-top: 40px;
    }
    .main {
        width: 840px;
    }
    .side {
        width: 340px;
        font-size: 0;
    }
    #ppt {
        width: 840px;
        height: 630px;
    }
    #player {
        width: 340px;
        height: 225px;
    }
    #ppt .ppt-h5-setting-nav {
        bottom: 48px;
    }
</style>
<div class="container">
    <div class="main">
        <div id="ppt"></div>
    </div>
    <div class="side">
        <div id="player"></div>
        <div id="chatroom"></div>
    </div>
</div>

<script type="text/javascript">
    LAM.run(function () {
        'use strict';
        var System = this;

        const channelId = 887396;
        const appId = "f0v2kieci3";
        const timestamp = new Date().getTime();
        const appSecret = "d848c6cf7018407d8da27b1dfb2365c7";
        const sign = md5(
            `${appSecret}appId${appId}channelId${channelId}timestamp${timestamp}${appSecret}`
        ).toLocaleUpperCase();
        const nickName = 'polyvtest555';
        const pic = 'http://livestatic.videocc.net/assets/wimages/missing_face.png';
        const userId = +new Date();
        var socket = null;

        const getToken = params =>
        axios.post(
            "http://api.polyv.net/live/v3/channel/common/get-token",
            params
        );


        getToken(Qs.stringify({ appId, timestamp, channelId, sign })).then(
            res => {
            const chatroom = new PolyvChatRoom({
                roomId: channelId,
                userId: userId,
                pic: pic,
                nick: nickName,
                container: "#chatroom",
                mediaChannelKey:'1',
                width: 340,
                height: 405,
                userType: "",
                token: res.data.data.token,
                roomMessage: function(data) {
                    // TODO
                    // data为聊天室socket消息，当有聊天室消息时会触发此方法
                    console.log(data);

                }
            });
        //连麦
        const rtc = new PolyvRTCWebSDK({
            roomId: channelId,
            socket: chatroom.chat.socket, // 传入socketio实例
            userId: userId,
            nick: nickName,
            pic: 'http://livestatic.videocc.net/assets/wimages/missing_face.png'
        });
        rtc.on('OPEN_MICROPHONE', (evt) => {
            console.log(evt.type); // video/audio (视频/音频通话)
    });
        socket = chatroom.chat.socket;




        const liveSdk = new PolyvLiveSdk({
            channelId: channelId,

            sign: sign, // 频道验证签名
            timestamp: timestamp, // 毫秒级时间戳
            appId: appId, // polyv 后台的appId
            flashvars:{code: '11'},
            socket: socket,
            user: {
                userId: userId,
                userName: nickName,
                pic: pic
            }
        });
        liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
            liveSdk.setupPlayer({
            pptEl: "#ppt",
            el: "#player",
            type: "auto",
            autoplay: true,
            controllerPosition: "ppt"
        });

        // 监听流状态变化刷新播放器
        liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE, function() {
            liveSdk.reloadPlayer();
        });
    });
    }
    );
    });

</script>